<template>
    <div class="login">
<!--        <h2>{{globalTitle}}</h2>-->

        <div class="card">
            <div class="left">
                <login_form v-if="current_type === 1"/>
                <regis_form v-else/>
            </div>
            <div class="right">
                <h1>Hello World!</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                <div class="switch" @click="switchLogin">{{current_type === 0 ? '登录' : '注册'}}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import login_form from './login_form.vue'
import regis_form from './regis_form.vue'
import {ref} from 'vue'
import {useLoginFunctions} from "/@components/hzsystem/LoginPublicFuncation";
const {globalTitle} = useLoginFunctions();

const current_type = ref(1)
const switchLogin = () => {
    current_type.value = current_type.value === 0 ? 1 : 0
}
</script>
<style scoped lang="scss">
*{
    box-sizing: border-box;
}
.login{
    background: #fbf3ff;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h2{
        color: #3FB5E3;
    }

    .card{
        width: 770px;
        height: 550px;
        position: relative;
        background: #fff;
        border-radius: 25px;
        -webkit-box-shadow: 0px 10px 40px -10px rgb(0 0 0 / 70%);
        -moz-box-shadow: 0px 10px 40px -10px rgba(0,0,0,0.7);
        box-shadow: 0px 10px 40px -10px rgb(0 0 0 / 70%);
        display: flex;
        align-items: center;


        .left{
            height: 550px;
            flex: 1;
        }

        .right{
            height: 550px;
            width: 370px;
            background-image: linear-gradient(45deg, #f046ff, #9b00e8 );
            border-radius: 25px;
            padding: 80px 25px 25px 25px;
            h1{
                color: #fff;
            }
            p{
                color:rgb(192, 192, 192);
            }
            .switch{
                width: 120px;
                height: 42px;
                border-radius: 20px;
                border: 2px solid #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                &:hover{
                    border: 2px solid rgb(192, 192, 192);
                }
            }
        }
    }
}
</style>